<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap-icons.css">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./junjin_3.1.css">
  <script src="./js/bootstrap.bundle.js"></script>
  <title>掘金项目</title>
</head>

<body>
  <!-- 导航栏 -->
  <nav class="navbar navbar-light bg-white navbar-expand-lg m-0 justify-content-evenly row sticky-top"
    style="border-bottom: 1px solid rgb(242,243,244);">
    <a class="navbar-brand col-1" href="#">
      <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
        class="d-block ps-2">
    </a>

    <!-- 第一层导航栏左侧列表栏 -->
    <div class="coantainer col-11 d-flex">
      <!-- 第一层列表栏 -->
      <div class="container-fluid start-0 w-50 ms-3 me-5">
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav text-secondary" style="font-size: 19px;">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="./juejin-homepage.html"
                style="color: #1e80ff;">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">沸点</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./juejin_course.html">课程</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">直播</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">咨询</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">活动</a>
            </li>

            <li class="nav-item ">
              <div class="dropdown">
                <a class="btn btn-light nav-link dropdown-toggle shadow-none bg-white border-0" href="#"
                  id="zsh-nav-btn" role="button" data-bs-toggle="dropdown" style="font-size: 19px;">
                  开发社区
                </a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item text-black" href="#">
                      <img
                        src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/qxy_logo.a3e171abe1e5724212eb4c6f3538f6c6.png~tplv-k3u1fbpfcp-5.image"
                        class="d-block w-100">
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="#">APP</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">插件</a>
            </li>
          </ul>
        </div>
      </div>

      <!-- 第一层导航搜索框IU -->
      <form class="d-flex ms-5 m-auto justify-content-end" role="search">
        <input class="form-control rounded-0 border-end-0 shadow-none bg-secondary bg-opacity-10 border-0 rounded-start"
          type="search" placeholder="探索稀土掘金" aria-label="Search" style="height: 32px;" id="search_input">
        <button
          class="btn btn-outline-success bi-search text-secondary rounded-0 border-start-0 bg-secondary bg-opacity-10 border-0 shadow-none rounded-end"
          type="submit" style="height: 32px;"></button>
      </form>

      <!-- 第一层导航 创作者中心 -->
      <div class="btn-group ms-1 m-auto d-flex me-0">
        <button class="btn btn-primary shadow-none lh-1" type="button" style="height: 32px;">
          创作者中心
        </button>
        <button type="button" class="btn btn-primary shadow-none dropdown-toggle dropdown-toggle-split lh-1"
          data-bs-toggle="dropdown" aria-expanded="false" style="height: 32px;">
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">写文章</a></li>
          <li><a class="dropdown-item" href="#">发沸点</a></li>
        </ul>
      </div>

      <!-- 导航栏 个人中心 登录按钮 -->
      <div class="d-flex m-auto">
        <button type="button" class="btn btn-outline-primary align-content-center shadow-none lh-1"
          style="height: 32px;" data-bs-toggle="modal" data-bs-target="#btn_login">登录</button>
      </div>
    </div>
  </nav>

  <!-- 导航栏下第二层 -->
  <div class="nav">
    <!-- nav_2为版心 -->
    <div class="nav_2">
      <div class="nav_left">
        <ul>
          <li>全部</li>
          <li>后端</li>
          <li>前端</li>
          <li>Android</li>
          <li>iOS</li>
          <li>人工智能</li>
          <li>开发工具</li>
          <li>代码人生</li>
          <li>阅读</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 第三层 正文部分 -->
  <div class="nav_2">
    <!-- 版心内左侧文本部分 
		.text为版心左侧文本区域宽度 700
		-->
    <div class="text">
      <!-- 每一块 700*195  高度撑开 内间距25 -->

      <!-- 第一行图书内容 -->
      <div class="d-flex" style="padding: 25px; border-bottom: 1px solid rgb(242,243,244);">
        <!-- 第一本图书 -->
        <!-- 左侧图书照片 -->
        <div>
          <img
            src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba4ecdc5afe94cc28c3c700a20524500~tplv-k3u1fbpfcp-no-mark:280:280:200:280.awebp?"
            alt="" class="shadow rounded" style="width: 100px;">
        </div>
        <!-- 右侧详情 -->
        <div class="" style="font-size: 14px; padding-left: 22px; ">

          <!-- 详情第一行 -->
          <div class="align-content-center d-flex">
            <span class="align-content-center rounded-1 my-auto"
              style="padding: 1px 6px; margin:3px 0px; background-color: #df8034;color: #fff; font-size: 12px;">预售</span>
            <span style="font-size: 20px;" class="ps-2 align-items-center">Elasticsearch 从入门到实践</span>
          </div>

          <!-- 详情第二行 -->
          <div class="pt-2">
            <p class="w-100 overflow-hidden text-nowrap" style="height: 20px; margin-top:5px; line-height: 20px;">
              从零开始与你一起学习 Elasticsearch 7.x，为你揭秘 Elasticsearch 7.x 中的核心技术。</p>
          </div>

          <!-- 详情第三行 -->
          <div class="d-flex">
            <!-- 作者头像 -->
            <div class="d-flex">
              <span style="width: 26px;height: 26px;border-radius: 13px;" class="overflow-hidden me-2">
                <img
                  src="https://p26-passport.byteacctimg.com/img/user-avatar/7f1fb6bb48d5bc03c350a55636a4ea22~300x300.image"
                  class="w-100">
              </span>
              <p class="align-self-center m-0">spoofer</p>
            </div>
            <!-- 作者介绍 -->
            <div class="d-flex">
              <span class="mx-2 align-self-center">后台研发工程师 @ 某K12教育科技公司</span>
            </div>
          </div>

          <!-- 详情第四行 价格 -->
          <div class="mt-2">
            <span style="font-size: 18px;color: #ed7b11;">¥ 39.9</span>
            <span style="font-size: 13px;color: rgb(113 119 124);letter-spacing: 3px;" class="ms-3">34小节·863人已购买</span>
          </div>
        </div>
      </div>

      <!-- 第二行图书内容 -->
      <div class="d-flex" style="padding: 25px; border-bottom: 1px solid rgb(242,243,244);">
        <!-- 第一本图书 -->
        <!-- 左侧图书照片 -->
        <div>
          <img
            src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db170489dd5c40b5a42ba61bfc8ac4ed~tplv-k3u1fbpfcp-no-mark:280:280:200:280.awebp?"
            alt="" class="shadow rounded" style="width: 100px;">
        </div>
        <!-- 右侧详情 -->
        <div class="" style="font-size: 14px; padding-left: 22px; ">

          <!-- 详情第一行 -->
          <div class="align-content-center d-flex">
            <span class="align-content-center rounded-1 my-auto"
              style="padding: 1px 6px; margin:3px 0px; background-color: #df8034;color: #fff; font-size: 12px;">预售</span>
            <span style="font-size: 20px;" class="ps-2 align-items-center">初探前端工程化</span>
          </div>

          <!-- 详情第二行 -->
          <div class="pt-2">
            <p class="w-100 overflow-hidden text-nowrap" style="height: 20px; margin-top:5px; line-height: 20px;">
              从零开始与你一起学习 Elasticsearch 7.x，为你揭秘 Elasticsearch 7.x 中的核心技术。</p>
          </div>

          <!-- 详情第三行 -->
          <div class="d-flex">
            <!-- 作者头像 -->
            <div class="d-flex">
              <span style="width: 26px;height: 26px;border-radius: 13px;" class="overflow-hidden me-2">
                <img
                  src="https://p26-passport.byteacctimg.com/img/user-avatar/7f1fb6bb48d5bc03c350a55636a4ea22~300x300.image"
                  class="w-100">
              </span>
              <p class="align-self-center m-0">spoofer</p>
            </div>
            <!-- 作者介绍 -->
            <div class="d-flex">
              <span class="mx-2 align-self-center">后台研发工程师 @ 某K12教育科技公司</span>
            </div>
          </div>

          <!-- 详情第四行 价格 -->
          <div class="mt-2">
            <span style="font-size: 18px;color: #ed7b11;">¥ 39.9</span>
            <span style="font-size: 13px;color: rgb(113 119 124);letter-spacing: 3px;" class="ms-3">34小节·863人已购买</span>
          </div>
        </div>
      </div>

      <!-- 第三行图书内容 -->
      <div class="d-flex" style="padding: 25px; border-bottom: 1px solid rgb(242,243,244);">
        <!-- 第一本图书 -->
        <!-- 左侧图书照片 -->
        <div>
          <img
            src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/359ac54a4608421f854b11b27201723c~tplv-k3u1fbpfcp-no-mark:280:280:200:280.awebp?"
            alt="" class="shadow rounded" style="width: 100px;">
        </div>
        <!-- 右侧详情 -->
        <div class="" style="font-size: 14px; padding-left: 22px; ">

          <!-- 详情第一行 -->
          <div class="align-content-center d-flex">
            <span class="align-content-center rounded-1 my-auto"
              style="padding: 1px 6px; margin:3px 0px; background-color: #df8034;color: #fff; font-size: 12px;">预售</span>
            <span style="font-size: 20px;" class="ps-2 align-items-center"> TypeScript 类型体操通关秘籍</span>
          </div>

          <!-- 详情第二行 -->
          <div class="pt-2">
            <p class="w-100 overflow-hidden text-nowrap" style="height: 20px; margin-top:5px; line-height: 20px;">
              从零开始与你一起学习 Elasticsearch 7.x，为你揭秘 Elasticsearch 7.x 中的核心技术。</p>
          </div>

          <!-- 详情第三行 -->
          <div class="d-flex">
            <!-- 作者头像 -->
            <div class="d-flex">
              <span style="width: 26px;height: 26px;border-radius: 13px;" class="overflow-hidden me-2">
                <img
                  src="https://p26-passport.byteacctimg.com/img/user-avatar/7f1fb6bb48d5bc03c350a55636a4ea22~300x300.image"
                  class="w-100">
              </span>
              <p class="align-self-center m-0">spoofer</p>
            </div>
            <!-- 作者介绍 -->
            <div class="d-flex">
              <span class="mx-2 align-self-center">后台研发工程师 @ 某K12教育科技公司</span>
            </div>
          </div>

          <!-- 详情第四行 价格 -->
          <div class="mt-2">
            <span style="font-size: 18px;color: #ed7b11;">¥ 39.9</span>
            <span style="font-size: 13px;color: rgb(113 119 124);letter-spacing: 3px;" class="ms-3">34小节·863人已购买</span>
          </div>
        </div>
      </div>


      <div class="" style="padding: 25px; border-bottom: 1px solid rgb(242,243,244);">第。。。本图书</div>
      <div class="" style="padding: 25px; border-bottom: 1px solid rgb(242,243,244);">第。。。本图书</div>
    </div>

    <!-- 版心内右侧部分 
		.right 为版心右侧 宽度240
		-->
    <div class="right">
      <div class="bg-white mb-2 m-0" style="padding:21px 24px; height:auto;"><span><img src="./img files/booklet.png"
            style="width: 12.5%;"></span><span class=""
          style="margin-left: 10px;font-size: 18px;line-height: 30px;font-weight: 500;color: #000;">我的课程</span></div>
      <div class="bg-white title" style="padding: 15px 16px; height: auto; border: 1px solid rgb(242,243,244);">
        <div style="font-size: 15px;">掘金课程是什么？</div>
        <div style="font-size: 14px;" class="py-2">一个小篇幅、高浓度、成体系、有收益的技术学习平台</div>
      </div>
      <div class="bg-white" style="padding: 12px 16px; height: auto;">
        <div>关注公众号 领取优惠码</div>
        <span><img src="./img files/gongzhonghao.png" class="w-100 my-2"></span>
      </div>
      <div class="bg-white mt-2" style="padding: 15px 16px; height: auto;">
        <ul class="d-flex justify-content-evenly m-0 px-3">
          <li class="text-center my-1 px-2">
            <span><img src="./img files/pen.png" class="w-50 d-block m-auto"></span>
            <span class="mt-2 d-block" style="font-size: 14px;">成为作者</span>
          </li>
          <li class="text-center my-1 px-2" style="border-left: 1px solid rgb(242,243,244);">
            <span><img src="./img files/email.png" class="w-50 d-block m-auto"></span>
            <span class="mt-2 d-block" style="font-size: 14px;">建议反馈</span>
          </li>
        </ul>
      </div>


    </div>
  </div>

  <!-- 登录框部分 -->
  <div class="modal fade" id="btn_login" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel " aria-hidden="true">
    <div class="modal-dialog position-absolute start-50 top-50 translate-middle">
      <div class="modal-content" style="width:318px;">
        <div style="width: 270px;" class="m-auto">
          <div class="modal-header m-0 border-0" style="margin-bottom:24px">
            <h1 class="modal-title" id="staticBackdropLabel" style="font-size: 18px;"><b>账密登录</b></h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>

          <div class="modal-body m-auto">
            <div>
              <input type="text" placeholder="邮箱/手机号(国际号码加区号)" style="padding: 10px;margin-bottom: 10px;width: 100%;">
            </div>
            <div>
              <input type="password" placeholder="请输入密码" style="padding: 10px;margin-bottom: 10px;width: 100%;">
            </div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-primary shadow-none w-100" style="padding: 6px 15.6px;">登录</button>
          </div>

          <div class="d-flex justify-content-between " style="margin: 12px 12px;color:rgb(0 127 255) ;font-size: 14px;">
            <span>手机登录</span>
            <span>忘记密码</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>